<div class="field-wrapper">
    <label class="label" *ngIf="!componentData.extends?.noLabelTxt">{{componentData.labelText}}</label>
    <ng-container *ngIf="!componentData.disabled;else disabledTpl">
        <div class="field-control" [ngClass]="{'has-form-error': getComponentError(componentData.identifyId)}"
            nz-tooltip [nzTooltipTitle]="componentData.extends.tooltip">
            <nz-input-group [nzAddOnBefore]="componentData.extends.prefix"
                [nzAddOnAfter]="componentData.extends.suffix?suffix:''">
                <input [ngClass]="borderClass" [ngStyle]="colorStyle" [zeprideAuthority]="zeprideAuthorityData"
                    [placeholder]="componentData.extends?.placeholder?componentData.extends?.placeholder:'请输入'+ componentData.labelText"
                    [disabled]="componentData.readonly" class="content border-form-item border-ctrl" type="text"
                    nz-input [ngModel]="inputValue" (ngModelChange)="inputChange($event)">
            </nz-input-group>
        </div>
        <span class="error-tip" [ngClass]="{'error-top-nolabel': componentData.extends?.noLabelTxt}"
            *ngIf="getComponentError(componentData.identifyId)">
            <ng-container *ngTemplateOutlet="errorTpl"></ng-container>
        </span>
    </ng-container>
</div>
<ng-template #errorTpl>{{getErrorMsg(componentData.identifyId)}}</ng-template>

<ng-template #disabledTpl>
    <div class="field-control">
        {{componentData.extends.prefix?componentData.extends.prefix:''}}
        {{inputValue}}
        <ng-container *ngIf="componentData.extends.suffixFunc != 'goodsModal'">
            {{componentData.extends.suffix?componentData.extends.suffix:''}}
        </ng-container>
        <i *ngIf="dataChangeLog" class="iconfont icon-file-list-2-line icon-data-change" nz-popover
            [nzPopoverContent]="contentTemplate"></i>
    </div>
</ng-template>

<ng-template #suffix>
    <div class="suffix-panel" (click)="suffixFunc()">
        {{componentData.extends.suffix}}
    </div>
</ng-template>

<ng-template #contentTemplate>
    <div class="popover-content">
        <div>近期更正</div>
        <div>更正时间：{{dataChangeLog.time | date: 'yyyy年MM月dd日 HH:mm'}}</div>
        <div>更正内容：由“<span class="font-red">{{dataChangeLog.sourceValue}}</span>”更正为“<span
                class="font-bule">{{dataChangeLog.targetValue}}</span>”
        </div>
    </div>
</ng-template>